<template>
	<div class="zh-academic-credit">
		<nav-header></nav-header>
		<div class="zh-table">
			<div class="zh-table-open clear">
				<div class="zh-open-left fl">
					<div class="open-width" style="width: 100px">
						<el-select v-model="catename" filterable placeholder="请选择">
						    <el-option
						      v-for="item in gradeData"
						      :key="item.id"
						      :label="item.name"
						      :value="item.id">
						    </el-option>
						</el-select>
					</div>
					<div class="open-width">
						<el-input v-model="keyword" placeholder="请输入学生名、学号、班级搜索" @keyup.enter.native="searchFunc"></el-input>
					</div>
					<el-button type="primary" @click="searchFunc">搜索</el-button>
					<el-button type="primary" @click="reset">重置</el-button>
				</div>
				<div class="zh-open-right fr">
					<el-button type="primary" @click="exportList">导出Excel表</el-button>
				</div>
			</div>
			<div class="zh-table-contents">
				<el-table
				    :data="listData"
				    border
				    max-height="600"
				    style="width: 100%">
				    <el-table-column
				      type="index"
                      :index="typeIndex"
				      label="序号"
				      align="center"
				      show-overflow-tooltip
				      width="50"
				      >
				    </el-table-column>
				    <el-table-column
				      prop="uname"
				      label="学生名字"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
				    <el-table-column
				      prop="number"
				      label="账号"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
				    <el-table-column
				      prop="orgname"
				      label="组织架构"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
				    <el-table-column
				      prop="sum_video"
				      label="观看视频条数"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
				    <el-table-column
				      prop="sum_score"
				      label="获得学分"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
				    <el-table-column
				      prop="createtime"
				      label="最后学习时间"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
				</el-table>
				<div class="table-pagination" v-show="total_number > 10">
					<el-pagination
					    @size-change="handleSizeChange"
					    @current-change="handleCurrentChange"
					    :current-page="listParam.page_index"
					    :page-sizes="[10, 20, 30, 40, 50, 100]"
					    :page-size="listParam.page_size"
					    layout="total, sizes, prev, pager, next, jumper"
					    :total="total_number">
					</el-pagination>
					<div class="pagination-button">
						<el-button 
							@click="getList"
							type="primary" icon="el-icon-refresh" 
							circle title="刷新数据" size="mini" >
						</el-button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
  	export default {
	    data() {
		    return {
		    	gradeData:[],
		      	listParam:{
		    		catename:0,
		       		keyword: '',
		       		page_index:1,
		       		page_size:10,
				},
				catename:0,
		       	keyword: '',
		        listData:[],
		        total_number:0,
		    }
		},
		created(){
			this.getGrade();
			this.getList();
	    },	
		methods: {
			searchFunc(){
				this.listParam.catename = this.catename;
				this.listParam.keyword = this.keyword;
				this.listParam.page_index = 1;
				this.getList();
			},
			reset() {
				this.catename = 0;
				this.keyword = '';
				this.listParam = {
					catename:0,
		       		keyword: '',
		       		page_index:1,
		       		page_size:10,
				}
				this.getList();
			},
			// 序号
            typeIndex(index) {
                return index + (this.listParam.page_index - 1) * this.listParam.page_size + 1;
            },
			getList(){
            	let success = (data=>{
            		this.listData = data.data.data;
            		this.total_number = data.data.data_sum;
            	})
            	//执行请求，并将回调方法变成config成员以便鉴权过期可以执行
            	this.$ajax.get('api/video/get_manage_student_score',{params: this.listParam,func:{success:success}})
            },
			getGrade(){
				// 重写成功回调
				let success = ( data => {
					this.gradeData = data.data;
					this.gradeData.unshift({id:0,name:'全部年级'})
				});
				if (this.$store.state.checkLevel) {
					this.$ajax.get("api/newlevel/platform_org", {
						params: {
							level: 3,
							app_code: sessionStorage.getItem('CheckSchoolAppCode'),
						},
						func: { success: success },
					});
				} else {
					this.$ajax.get("api/org/all_grade", {
						params: {},
						func: { success: success },
					});
				}
			},
			
		     handleSizeChange(val) {
		     	this.listParam.page_index = 1;
		    	this.listParam.page_size = val;
		    	this.getList()
		    },
		    handleCurrentChange(val) {
		    	this.listParam.page_index = val;
		    	this.getList();
		    },
		    exportList(){            
                if( this.listData.length === 0 ){
					this.$message.warning("暂无数据！")
					return false;
                }

                this.export_excel('api/video/manage_student_score_excel', this.listParam, '学生学分');
	    	},
		},
  	}
</script>